<template>
  <view>
    <uni-popup
      ref="popup"
      type="bottom"
      :mask-click="false"
      background-color="#fff"
      @maskClick="closePopup"
    >
      <!-- @pickend="bindPickend" -->
      <picker-view
        :value="value"
        @change="bindChange"
        class="picker-view"
        :immediate-change="true"
        :indicator-style="indicatorStyle"
      >
        <picker-view-column>
          <view class="item" v-for="(item, index) in years" :key="index">{{
            item
          }}</view>
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item, index) in isThisYear" :key="index">{{
            item
          }}</view>
        </picker-view-column>
        <picker-view-column>
          <view
            class="item"
            v-for="(item, index) in isThisMonth"
            :key="index"
            >{{ item }}</view
          >
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item, index) in hours" :key="index">{{
            item
          }}</view>
        </picker-view-column>
      </picker-view>
      <view class="btn_box">
        <view class="btn con" @click="closePopup">取 消</view>
        <view class="btn cen" @click="confirm">确 定</view>
        <!-- <button class="mini-btn" type="primary" size="mini" @click="confirm">
          确 定
        </button>
        <button class="mini-btn" type="default" size="mini" @click="closePopup">
          取 消
        </button> -->
      </view>
    </uni-popup>
  </view>
</template>

<script>
import _ from 'lodash'
const dayjs = require('dayjs')
export default {
  name: 'MyDataSelect',
  data() {
    const date = new Date()
    const month = date.getMonth() + 1
    const day = date.getDate()
    const hour = date.getHours()
    const years = []
    const year = date.getFullYear()
    for (let i = year; i <= year + 2; i++) {
      years.push(i)
    }
    return {
      years,
      hours: [
        '09:00',
        '09:30',
        '10:00',
        '10:30',
        '11:00',
        '11:30',
        '12:00',
        '12:30',
        '13:00',
        '13:30',
        '14:00',
        '14:30',
        '15:00',
        '15:30',
        '16:00',
        '16:30',
        '17:00',
        '17:30',
      ],
      months: [],
      tempDate: '',
      days: [],
      year: date.getFullYear(),
      month: date.getMonth() + 1,
      day: date.getDate(),
      hour: '',
      value: [0, 0, 0, 0], //  hour - 9
      indicatorStyle: `height: 40px;`,
      value2: [],
    }
  },
  computed: {
    // 月选择
    isThisYear() {
      let months = []
      let isCrrentYear = dayjs().isSame(this.year + '', 'year')
      // console.log('是当年', isCrrentYear)
      if (isCrrentYear) {
        const date = new Date()
        const month = date.getMonth() + 1
        for (let i = month; i <= 12; i++) {
          let temp = i < 10 ? '0' + i : '' + i
          months.push(temp)
        }
      } else {
        for (let i = 1; i <= 12; i++) {
          let temp = i < 10 ? '0' + i : '' + i
          months.push(temp)
        }
      }
      // console.log('月')
      this.months = months
      return months
    },
    // 日选择
    isThisMonth() {
      // let temp = this.isThisYear
      let days = []
      // console.log('日1', this.year)
      // console.log('日2444', this.month)
      let isCrrentMonth = dayjs().isSame(this.year + '' + this.month, 'month')
      const MonthDayNum = new Date(this.year, this.month, 0).getDate()
      console.log('是当月?', isCrrentMonth)
      if (isCrrentMonth) {
        const date = new Date()
        const day = date.getDate()
        // 当月
        for (let i = day + 2; i <= MonthDayNum; i++) {
          let temp = i < 10 ? '0' + i : '' + i
          days.push(temp)
        }
      } else {
        for (let i = 1; i <= MonthDayNum; i++) {
          let temp = i < 10 ? '0' + i : '' + i
          days.push(temp)
        }
      }
      // console.log('日')
      this.days = days
      // console.log('日333333333333', this.day, this.value)
      return days
    },
  },
  methods: {
    bindChange(e) {
      let val = e.detail.value
      this.value2 = e.detail.value
      this.year = this.years[val[0]]
      this.$nextTick(() => {
        this.month = Number(this.months[val[1]])
        this.day = this.days[val[2]]
        if (this.years[this.value[0]] != this.year) {
          val[1] = 0
          this.value = [val[0], val[1], 0, 0]
        }
        if (this.months[this.value[1]] != this.month) {
          val[2] = 0
          this.value = val
        }
      })
    },
    openPopup() {
      this.$refs.popup.open()
      if (this.tempDate === '') {
        this.tempDate = dayjs().add(2, 'day').format('YYYY-MM-DD 09:00')
        console.log('打开', this.tempDate)
      }
    },
    // 关闭
    closePopup() {
      this.$refs.popup.close()
    },
    // 确定
    confirm() {
      if (this.value2.length > 0) {
        let val = this.value2
        this.tempDate = `${this.years[val[0]]}-${this.months[val[1]]}-${
          this.days[val[2]]
        } ${this.hours[val[3]]}`
      }
      this.$emit('selectDate', this.tempDate)
      this.$refs.popup.close()
    },
  },
}
</script>

<style scoped>
.picker-view {
  width: 750rpx;
  height: 600rpx;
  margin-top: 20rpx;
}

.item {
  height: 40px;
  line-height: 40px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.btn_box {
  width: 80%;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 30rpx 0rpx 40rpx 0rpx;
  background-color: #fff;
}
.btn_box .btn {
  text-align: center;
  margin: 0 28rpx;
  font-size: 29rpx;
  width: 145rpx;
  line-height: 74rpx;
  border-radius: 10rpx;
}
.btn_box .cen {
  border: solid 1px #1aad19;
  background-color: #1aad19;
  color: #fff;
}
.btn_box .con {
  background-color: #fff;
  border: solid 1px #ccc;
  color: #666;
}
</style>
